<!-- src/views/WorkflowAutomation.vue -->
<template>
  <div class="workflow-automation">
    <div class="workflow-header">
      <h2>🤖 智能工作流自动化</h2>
      <div class="header-actions">
        <el-button type="primary" @click="showCreateWorkflow = true">
          <el-icon>
            <Plus />
          </el-icon>
          创建工作流
        </el-button>
      </div>
    </div>

    <!-- Main Layout -->
    <el-row :gutter="20">
      <el-col :span="8">
        <WorkflowList :workflows="workflows" :selected-workflow="selectedWorkflow" :active-workflows="activeWorkflows"
          @select-workflow="selectWorkflow" @toggle-workflow="toggleWorkflow" />
      </el-col>

      <el-col :span="16">
        <el-card v-if="selectedWorkflow" class="workflow-detail">
          <template #header>
            <div class="detail-header">
              <div>
                <h3>{{ selectedWorkflow.name }}</h3>
                <p>{{ selectedWorkflow.description }}</p>
              </div>
              <div class="detail-actions">
                <el-button size="small" @click="runWorkflow(selectedWorkflow)">
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                  运行
                </el-button>
                <el-dropdown>
                  <el-button size="small">
                    更多 <el-icon>
                      <ArrowDown />
                    </el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="deleteSelectedWorkflow">删除工作流</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </template>

          <WorkflowCanvas :workflow="selectedWorkflow" :canvasState="{ selectedNode, zoomLevel, nodeWidth, nodeHeight }"
            :canvasActions="{ selectNode, zoomIn, zoomOut, resetZoom, getNodeIcon, getConnectionPath }" />

          <NodePropertiesPanel :selected-node="selectedNode" @save="saveNodeConfig" @cancel="unselectNode" />

        </el-card>
        <el-empty v-else description="请选择或创建一个工作流" />
      </el-col>
    </el-row>

    <!-- Create Workflow Dialog -->
    <el-dialog v-model="showCreateWorkflow" title="创建工作流" width="600px">
      <el-form :model="newWorkflow" :rules="workflowRules" ref="workflowFormRef" label-width="100px">
        <el-form-item label="工作流名称" prop="name">
          <el-input v-model="newWorkflow.name" placeholder="请输入工作流名称" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="newWorkflow.description" type="textarea" :rows="3" placeholder="请输入工作流描述" />
        </el-form-item>
        <el-form-item label="选择模板">
          <el-select v-model="newWorkflow.template" placeholder="选择一个模板开始" style="width: 100%">
            <el-option v-for="template in workflowTemplates" :key="template.id" :label="template.name"
              :value="template.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateWorkflow = false">取消</el-button>
        <el-button type="primary" @click="handleCreateWorkflow" :loading="loading">创建</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Plus, VideoPlay, ArrowDown } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import WorkflowList from '../components/WorkflowList.vue';
import WorkflowCanvas from '../components/WorkflowCanvas.vue';
import NodePropertiesPanel from '../components/NodePropertiesPanel.vue';

import { useWorkflow } from '../composables/useWorkflow';
import { useWorkflowCanvas } from '../composables/useWorkflowCanvas';

// Workflow Management
const {
  workflows,
  selectedWorkflow,
  activeWorkflows,
  workflowTemplates,
  showCreateWorkflow,
  workflowFormRef,
  newWorkflow,
  workflowRules,
  loading,
  fetchWorkflows,
  selectWorkflow,
  toggleWorkflow,
  handleCreateWorkflow,
  deleteSelectedWorkflow
} = useWorkflow();

// Workflow Canvas
const {
  selectedNode,
  zoomLevel,
  nodeWidth,
  nodeHeight,
  selectNode,
  unselectNode,
  zoomIn,
  zoomOut,
  resetZoom,
  saveNodeConfig,
  getNodeIcon,
  getConnectionPath
} = useWorkflowCanvas(selectedWorkflow);

const runWorkflow = (workflow) => {
  // In a real app, this would call the API
  ElMessage.info(`正在运行工作流: ${workflow.name}`);
};

// Lifecycle Hooks
onMounted(() => {
  // Mock data for initial load. Replace with API call if ready.
  workflows.value = [
    {
      id: 'wf-1',
      name: '新用户入门引导',
      description: '当新用户注册时，自动发送欢迎邮件和操作指引。',
      nodes: [
        { id: 'node-1', type: 'trigger', title: '用户注册', subtitle: '当有新用户', x: 50, y: 50, status: 'success', config: { trigger: 'user_register' } },
        { id: 'node-2', type: 'action', title: '发送邮件', subtitle: '欢迎邮件', x: 250, y: 150, status: 'pending', config: { action: 'send_email' } },
        { id: 'node-3', type: 'delay', title: '延迟一天', subtitle: '等待24小时', x: 250, y: 250, status: 'pending', config: {} },
        { id: 'node-4', type: 'action', title: '发送短信', subtitle: '操作提醒', x: 450, y: 250, status: 'pending', config: { action: 'send_sms' } },
      ],
      connections: [
        { from: 'node-1', to: 'node-2' },
        { from: 'node-2', to: 'node-3' },
        { from: 'node-3', to: 'node-4' },
      ]
    },
    // ... other workflows
  ];
  if (workflows.value.length > 0) {
    selectWorkflow(workflows.value[0]);
  }
  // fetchWorkflows(); // Use this when API is ready
});

</script>

<style scoped>
.workflow-automation {
  padding: 20px;
}

.workflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.workflow-detail {
  position: sticky;
  top: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-header h3 {
  margin: 0;
}

.detail-header p {
  font-size: 0.9em;
  color: #666;
  margin: 5px 0 0;
}

.detail-actions .el-button,
.detail-actions .el-dropdown {
  margin-left: 10px;
}
</style>
